<template>
  <view class="view-tab">
    <view class="button" @click="handleViewContract">
      <image class="icon" src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/user-contract.png"></image>
      <image class="font" src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/user-contract-txt.png"></image>
    </view>
    <view class="button" @click="handleViewProduct">
      <image class="font" src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/user-product-txt.png"></image>
      <image class="icon" src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/user-product.png"></image>
    </view>
  </view>
</template>

<script setup>
import useUserStore from "@/store/modules/user/index.js";
const { isLogin } = useUserStore();
const handleViewContract = () => {
  if (!isLogin.value) {
    isLogin.popShow = true;
  } else {
    // 跳转合同页面
    uni.navigateTo({url:'/pages/contractManage/contractList/index'})
  }
};
const handleViewProduct = () => {
  if (!isLogin.value) {
    isLogin.popShow = true;
  } else {
    // 跳转产品页面
  }
};
</script>

<style lang="scss" scoped>
.view-tab {
  width: 100%;
  height: 128rpx;
  line-height: 128rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden; /* 确保超出部分不会显示 */
  border-radius: 15rpx;

  .button {
    position: relative;
    width: 56%; /* 每个按钮占据一半宽度 */
    height: 100%;
    display: flex;
    //   justify-content: center;
    justify-content: space-between;
    align-items: center;
    background-size: cover;
    background-position: center;
    z-index: 1; /* 确保内容在背景图之上 */
    transition: background-position 0.3s ease; /* 平滑过渡效果 */
    box-sizing: border-box;
  }
  .button:first-child {
    background-image: url("http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/user-tab-left.png");
    background-position: right; /* 使第一个按钮的背景图靠右对齐 */
    margin-right: -45px; /* 重叠部分的宽度 */
    padding-right: 65px;
    clip-path: polygon(0% 0%, 106% 0%, 70% 100%, 0% 100%);
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(134, 144, 156, 0.1);
  }

  .button:last-child {
    background-image: url("http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/user-tab-right.png");
    background-position: left; /* 使第二个按钮的背景图靠左对齐 */
    margin-left: 0px; /* 重叠部分的宽度 */
    padding-left: 65px;
    clip-path: polygon(29% 0%, 100% 0%, 100% 100%, -3% 100%);
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(134, 144, 156, 0.1);
  }

  .icon {
    width: 128rpx;
    height: 128rpx;
  }

  .font {
    width: 144rpx;
    height: 40rpx;
  }
}
</style>
